<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示页面</title>
    <style>
        html {
            scrollbar-gutter: stable;
        }
        h1, article, .wa {
            max-width: 800px;
            margin-inline: auto;
        }
        img {
            max-width: calc(100% - 4px);
            height: auto;
        }
        .wa {
            outline: 1px dotted darkblue;
            padding: 12px 8px;
            margin-block: 1em;
            background-color: #f0f3f9;
        }

        /* See: https://www.zhangxinxu.com/wordpress/2022/10/css-file-selector-button/ */
        ::file-selector-button {
            height: 2.5rem;
            font-size: 1rem;
            color: #fff;
            border-radius: .25rem;
            border: 1px solid #2a80eb;
            padding: .25rem 1rem;
            background-color: #2a80eb;
            box-sizing: border-box;
            font-family: inherit;
            cursor: pointer;
        }

        input {
            color: gray;
        }

        article {
            border: 1px solid #ddd;
            padding: 12px 8px;
            display: flow-root;
            line-height: 1.75;
        }

        .preview {
            background-color: #f5f5f5;
            padding: 12px 8px;
        }
        .preview:empty::before {
            display: grid;
            content: '虚位以待';
            color: gray;
            place-items: center;
        }
    </style>
</head>
<body>
    <h1>演示页面</h1>
    <div class="wa">
        上传图片：<input id="file" type="file" accept="image/*" multiple>
    </div>
    <article contenteditable="true">
        <p>自己上传的图会显示在这里 ↓</p>
        <div id="preview" class="preview"></div>
        <h3>标题，随便写点什么啦</h3>
        <p>本演示页面测试图片拉伸效果，对布局无任何依赖，只要一个 <code>&lt;img&gt;</code> 元素就可以实现相应的效果了。</p>
        <p>引入 JS ，然后就没有然后了，所有包含有类名 resizable 或者包含属性名 resizable 的<code>&lt;img&gt;</code> 元素就可以被拉伸。</p>
        <p>下面几张图是内置的测试图，大家也可以点击上面的上传图片按钮，使用自己上传的图片进行测试。</p>
        <hr>
        <p>这是原图：</p>
        <p>
            <img src="./assets/origin.jpg" resizable alt="原图">
        </p>
        <p>这是有才的人处理之后的图：</p>
        <p>
            <img src="./assets/change.jpg" resizable alt="处理图">
        </p>
        <p>这是我现在的心情（APNG素材，源自<a href="https://www.zhangxinxu.com/wordpress/2014/09/apng-history-character-maker-editor/">这篇文章</a>）：</p>
        <p><img src="./assets/small-apng.png" resizable alt="我的心情"></p>
        
    </article>

    <script type="module">
        import onlyImgResize from './src/onlyImgResize.js';

        onlyImgResize();

        // 图片上传处理
        file.addEventListener('change', function (event) {
            const files = event.target && event.target.files;

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                // 插入空白占位图
                const img = document.createElement('img');
                img.className = 'resizable';
                // 显示图
                var reader = new FileReader()
                reader.onload = function(event) {
                    img.src = event.target.result;
                    // 图片插入
                    preview.append(img);
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>